<template>
  <div>
    <nav-bar title="动火作业申请"></nav-bar>
    <div class="maxinBox">
      <van-field
        disabled
        v-model="applicant"
        name="申请人"
        label="申请人"
        placeholder="请输入申请人"
      />
      <van-cell required is-link title="动火级别" :value="fireLevel" @click="showHotCard = true" />
      <van-action-sheet v-model="showHotCard" :actions="hotCardList" @select="onSelect" />
      <van-field
        required
        v-model="form.guardian"
        name="监护人"
        label="监护人"
        placeholder="请输入监护人"
      />
      <van-cell required title="生效日期" @click="startDate" is-link :value="form.effectDate" />
      <van-popup v-model="showStartDate" position="bottom" style="height: 40%">
        <van-datetime-picker
          type="date"
          @confirm="startDateConfirm"
          @cancel="showStartDate = false"
          title="请选择生效日期"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>
      <van-cell required title="终止日期" @click="endDate" is-link :value="form.invalidDate" />
      <van-popup v-model="showEndDate" position="bottom" style="height: 40%">
        <van-datetime-picker
          type="date"
          @confirm="endDateConfirm"
          @cancel="showEndDate = false"
          title="请选择生效日期"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>
      <van-field required name="uploader" label="附件上传">
        <template #input>
          <van-uploader multiple :max-count="1" v-model="imagesList" :after-read="onUploader" :before-delete="delUpload" />
        </template>
      </van-field>
      <div class="backgroundfff" style="position: fixed;bottom: 0;width: 100%;">
        <div style="padding: 0.3125rem 10%;">
          <van-button round block type="info" @click="addReported">
            提交
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import hotCardManageAPI from '../../../../api/workAPI/hotCardManageAPI.js'
  import dashbordAPI from '../../../../api/dashbordAPI.js'
  export default {
    data() {
      return {
        showStartDate: false,
        showEndDate: false,
        minDate: moment(new Date()).add(0,'days')._d,
        maxDate: new Date(2025, 1, 1),
        imagesList: [],
        hotCardList: [
          {
            name: 'I级',
            value: '1'
          },
          {
            name: 'II级',
            value: '2'
          },
          {
            name: 'III级',
            value: '3'
          }],
        showHotCard: false,
        fireLevel: '',
        licenseUrl: [],
        applicant: JSON.parse(localStorage.getItem('name')).name,
        form: {
          licenseUrl: [],
          effectDate: '',
          invalidDate: '',
          guardian: '',
          applicant: '',
          fireLevel: ''
        }
      }
    },
    methods: {
      // 选择生效时间
      startDate() {
        this.showStartDate = true
      },
      // 生效时间选择确定按钮
      startDateConfirm(val) {
       this.form.effectDate = moment(val).format('YYYY-MM-DD')
       this.showStartDate = false
      },
      // 选择生效时间
      endDate() {
        this.showEndDate = true
      },
      // 生效时间选择确定按钮
      endDateConfirm(val) {
       this.form.invalidDate = moment(val).format('YYYY-MM-DD')
       this.showEndDate = false
      },
      // 选择动火等级
      onSelect(item) {
        this.showHotCard = false;
        this.form.fireLevel = item.value
        this.fireLevel = item.name
      },
      // 上传图片
      onUploader(file) {
        file.status = 'uploading'
        file.message = '上传中'
        dashbordAPI.uploadAvatar(file.file).then(res => {
          this.licenseUrl.push(res.fileUrl)
          file.status = ''
          file.message = ''
        }).finally(() => {
          file.status = ''
          file.message = ''
        })
      },
      // 删除上传图片
      delUpload(file) {
        this.imagesList.forEach(item => {
          if (item.file.name === file.file.name) {
            let index = this.imagesList.indexOf(item);
            this.imagesList.splice(index, 1)
            this.licenseUrl.splice(index, 1)
          }
        })
      },
      // 新增报备
      addReported() {
        if (this.form.fireLevel === '') {
          this.$toast.fail('请选择动火等级')
          return
        }
        if (this.form.guardian === '') {
          this.$toast.fail('监护人不能为空')
          return
        }
        if (this.form.effectDate === '') {
          this.$toast.fail('请选择生效时间')
          return
        }
        if (this.form.invalidDate === '') {
          this.$toast.fail('请选择终止日期')
          return
        }
        if (!this.licenseUrl.length) {
          this.$toast.fail('请上传附件照片')
          return
        }
        this.form.licenseUrl = this.licenseUrl[0]
        hotCardManageAPI.addHotCard(this.form).then(res => {
          this.$toast('添加成功')
          this.$router.push({
            name: 'HotCardManage'
          })
        })
      }
    },
    mounted() {
    }
  }
</script>

<style scoped lang="scss">
/deep/ .van-field--disabled .van-field__label{
  color: #323233;
}
</style>
